<template>
	<div id="bannerAll">
		<div style="width: 100%;height: 58px; background-color: #FFFFFF;"></div>
		<div class="bannerUserSetting" ref='userSettingBox' @mouseover="userSettingShow" @mouseout="userSettingHide">
			<router-link to="/change" class="bannerUserSettingBox">修改信息</router-link>
			<div class="bannerUserSettingBox" @click="cancelLogin">退出登录</div>
		</div>
		<div id="banner1" ref='ban1'>
			<div class="logo">
				<img src="../static/wenxuange.png" />
			</div>
			<div class="mid">
				<div class="nav">
					<router-link to="/index" :class="currentPage == 1 ?'navSonSelect':'navSon'"
						@click.native='changeCanBanner(1)'>首页</router-link>
					<router-link to="/write" :class="currentPage == 2 ?'navSonSelect':'navSon'"
						@click.native='changeCanBanner(0)'>写作</router-link>
					<div class="navSon">关于我们</div>
				</div>
				<div class="search">
					<div class="searchInput">
						<input type="text" placeholder="请输入搜索内容" />
					</div>
					<div class="searchBtn btn">搜索</div>
				</div>
			</div>
			<div class="bannerRight" v-if="!isLogin">
				<div class="login btn" @click="go('login')">登录</div>
				<div class="sign btn" @click="go('sign')">注册</div>
			</div>
			<div class="bannerUserInfo" v-else @mouseover="userSettingShow" @mouseleave="userSettingHide">
				<div class="bannerUserName">{{userInfo.name}}</div>
				<div class="bannerUserPic">
					<img :src="this.ip+'/'+userInfo.imgurl" />
				</div>
			</div>
		</div>
		<div id="banner2" ref="ban2">
			<div class="logo">
				<img src="../static/wenxuange.png" />
			</div>
			<div class="mid">
				<div class="nav">
					<router-link :class="currentIndex == 1 ?'navSonSelect':'navSon'" to="/index/indexRecommend"
						@click.native='changeCurrentIndex(1)' @mouseleave.native="returnChange">推荐</router-link>
					<router-link :class="currentIndex == 2 ?'navSonSelect':'navSon'" to="/index/indexAttention"
						@click.native='changeCurrentIndex(2)' @mouseleave.native="returnChange">关注</router-link>
					<router-link :class="currentIndex == 3 ?'navSonSelect':'navSon'" to="/index/indexRank"
						@click.native='changeCurrentIndex(3)' @mouseleave.native="returnChange">排行</router-link>
				</div>
				<div class="search">
					<div class="searchInput">
						<input type="text" placeholder="请输入搜索内容" />
					</div>
					<div class="searchBtn btn">搜索</div>
				</div>
			</div>
			<div class="bannerRight" v-if="!isLogin">
				<div class="login btn" @click="go('login')">登录</div>
				<div class="sign btn" @click="go('sign')">注册</div>
			</div>
			<div class="bannerUserInfo" v-else @mouseover="userSettingShow" @mouseleave="userSettingHide">
				<div class="bannerUserName">{{userInfo.name}}</div>
				<div class="bannerUserPic">
					<img :src="this.ip+'/'+userInfo.imgurl" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				before: 0,
				canChangeBanner: true,
				isLogin: false,
				userInfo: {},
				currentPage: 1,
				currentIndex: 1
			}
		},
		mounted() {
			if (this.$storage.get('user')) {
				this.isLogin = true
				this.userInfo = this.$storage.get('user')
			}
			if (this.$route.path == '/detail' || this.$route.path == '/write') {
				this.$store.commit({
					type: "changeBanner",
					data: false
				})
			}
			window.addEventListener('scroll', this.changeBanner) // 监听滚动事件
		},
		methods: {
			changeCurrentIndex(e) {
				this.$store.commit({
					type: "changeCurrentIndex",
					data: e
				})
				window.removeEventListener('scroll', this.changeBanner)
			},
			returnChange(){
				window.addEventListener('scroll', this.changeBanner) // 监听滚动事件
			},
			changeBanner() {
				if (this.canChangeBanner) {
					// 更改banner
					// 滚动方向改变即 更改banner
					let direction = pageYOffset - this.before
					if (direction > 0) {
						this.$refs.ban1.style.top = "-58px"
						this.$refs.ban2.style.top = "0px"
					} else {
						this.$refs.ban1.style.top = "0px"
						this.$refs.ban2.style.top = "116px"
					}
					this.before = pageYOffset
				}
			},
			changeCanBanner(e) {
				let can
				let currentPage
				if (e == 1) {
					can = true
					currentPage = 1
				} else if (e == 0) {
					can = false
					currentPage = 2
				}
				this.$store.commit({
					type: "changeBanner",
					data: can
				})
				this.$store.commit({
					type: "changeCurrentPage",
					data: currentPage
				})
			},
			userSettingShow() {
				this.$refs.userSettingBox.style.top = '58px'
			},
			userSettingHide() {
				this.$refs.userSettingBox.style.top = '-80px'
			},
			cancelLogin() {
				this.$storage.remove('user')
				this.userInfo = {}
				this.isLogin = false
				this.userSettingHide()
			},
			go(e) {
				location.assign(`http://${location.host}/login?type=${e}`)
			}
		},
		watch: {
			'$store.state.canBannerChange'(e) {
				this.canChangeBanner = e
			},
			'$store.state.currentPage'(e) {
				this.currentPage = e
			},
			'$store.state.currentIndex'(e) {
				this.currentIndex = e
			}
		}
	}
</script>

<style>
	#bannerAll {
		height: 58px;
		width: 100%;
		min-width: 1048px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 5px rgba(32, 32, 32, .3);
		overflow: hidden;
		position: fixed;
		top: 0;
		z-index: 100000;
	}

	#banner1,
	#banner2 {
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: space-between;
		user-select: none;
		left: 0;
		transition: all .3s;
	}

	#banner1 {
		top: 0;
	}

	#banner2 {
		top: 58px;
	}

	.nav,
	.search,
	.mid,
	.bannerRight,
	.bannerUserInfo {
		height: 58px;
		flex-direction: row;
		align-items: center;
		display: flex;
	}

	.mid {
		width: 960px;
		position: absolute;
		left: calc(50% - 480px);
	}

	@media (max-width: 1290px) {
		.mid {
			width: 650px;
			position: absolute;
			left: 150px;
			transform: translateX(0);
		}
	}

	.btn {
		border-radius: 16px;
		height: 32px;
		padding: 0 24px;
		line-height: 32px;
		cursor: pointer;
		border: #996699 1px solid;
		transition: all .3s;
	}

	.nav {
		line-height: 58px;
	}

	.nav .navSon,
	.nav .navSonSelect {
		margin: 0 15px;
		text-decoration: none;
		cursor: pointer;
		color: black;
		position: relative;
	}


	.nav .navSon:hover {
		font-weight: bold;
	}

	.nav .navSonSelect {
		font-weight: bold;
	}

	.nav .navSonSelect::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #996699;
		height: 5px;
		content: ""
	}

	.search .searchInput input {
		color: #999999;
		background-color: #EEEEEE;
		border-radius: 16px;
		border: none;
		width: 300px;
		height: 32px;
		padding: 0 16px;
		line-height: 32px;
	}

	.search .searchInput input:focus {
		outline: none
	}

	.search .searchBtn {
		color: white;
		background-color: #996699;
		margin-left: 16px;
	}

	.bannerRight .login {
		color: #996699;
	}

	.bannerRight .sign {
		background-color: #996699;
		color: white;
		margin: 0 16px;
	}

	.bannerRight .login:hover {
		background-color: #996699;
		color: white;
	}

	.bannerRight .sign:hover,
	.search .searchBtn:hover {
		background-color: #9999CC;
		border: #9999CC 1px solid;
	}

	.bannerUserInfo {
		cursor: pointer;
		position: relative;
	}

	.bannerUserInfo .bannerUserNmae {
		font-weight: bold;
	}

	.bannerUserInfo .bannerUserPic {
		margin: 0 16px;
	}

	.bannerUserInfo .bannerUserPic,
	.bannerUserInfo .bannerUserPic img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}

	.bannerUserSetting {
		position: fixed;
		width: 150px;
		background-color: #FFFFFF;
		box-shadow: 0 2px 5px rgba(32, 32, 32, .3);
		text-align: center;
		top: -80px;
		right: 16px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		transition: all .3s;
		z-index: -1;
		overflow: hidden;
	}

	.bannerUserSetting .bannerUserSettingBox {
		height: 40px;
		line-height: 40px;
		transition: all .3s;
		cursor: pointer;
		display: block;
		color: black;
		text-decoration: none;
	}

	.bannerUserSetting .bannerUserSettingBox:hover {
		background-color: #CCCCFF;
	}
</style>
